

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" type="image/png" href="/img/favicon.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="Lin">
  <meta name="keywords" content="">
  <title>Fluid 主题魔改 - Vin</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.staticfile.org/github-markdown-css/4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.staticfile.org/highlight.js/10.1.2/styles/androidstudio.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->

  
<link rel="stylesheet" href="/css/custom.css">



  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.8.5","typing":{"enable":true,"typeSpeed":50,"cursorChar":"_","loop":false},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"anchorjs":{"enable":false,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"copy_btn":true,"image_zoom":{"enable":true},"lazyload":{"enable":true,"onlypost":false},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 5.2.0"></head>


<body>
  <header style="height: 60vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>Vin's Blog</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner intro-2" id="background" parallax=true
         style="background: url('https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/2020/20201001115214.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="Fluid 主题魔改">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2020-10-22 11:44" pubdate>
        2020年10月22日 中午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      3.3k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      50
       分钟
    </span>
  

  
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid">
  <div class="row">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-md">
      <div class="container nopadding-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">Fluid 主题魔改</h1>
            
            <div class="markdown-body">
              <h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>看过了很多 Hexo 的主题，选来选去，还是 Fluid 主题比较符合我心目中简洁与实用的要求。</p>
<p>有了称心的主题，接下来做的就是对细节部分的微调了，让主题更有个人特色。</p>
<h2 id="主题文件的构成"><a href="#主题文件的构成" class="headerlink" title="主题文件的构成"></a>主题文件的构成</h2><h3 id="0-配置文件"><a href="#0-配置文件" class="headerlink" title="0. 配置文件"></a>0. 配置文件</h3><p>配置文件是在主题文件夹下的 <code>_config.yml</code> 和 <code>_static_prefix.yml</code> ，推荐使用<a target="_blank" rel="noopener" href="https://hexo.fluid-dev.com/docs/guide/#%E8%A6%86%E7%9B%96%E9%85%8D%E7%BD%AE">覆盖配置</a>的方式来配置。</p>
<blockquote>
<p>覆盖配置可以使<strong>主题配置</strong>放置在 fluid 目录之外，避免在更新主题时丢失自定义的配置。</p>
</blockquote>
<p>_config.yml 主题配置文件部分配置如下</p>
<div class="hljs"><pre class="hljs-wrap"><code data-rel="Code" class="hljs yaml"><span class="hljs-attr">code:</span>  <span class="hljs-comment"># 代码块相关的配置</span>
  <span class="hljs-attr">highlight:</span>  <span class="hljs-comment"># 代码高亮</span>
    <span class="hljs-attr">highlightjs:</span>
          <span class="hljs-attr">style:</span> <span class="hljs-string">&#x27;Androidstudio&#x27;</span>  <span class="hljs-comment"># 高亮样式见：https://highlightjs.org/static/demo/  在页面挑选 style 填入</span>
          <span class="hljs-attr">bg_color:</span> <span class="hljs-literal">true</span>  <span class="hljs-comment"># 是否根据 style 改变代码背景色，**如果 style 是深色背景别忘了开启此项**</span>

<span class="hljs-attr">fun_features:</span> <span class="hljs-comment"># 一些好玩的功能</span>
  <span class="hljs-attr">typing:</span> <span class="hljs-comment"># 为 subtitle 添加打字机效果</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">typeSpeed:</span> <span class="hljs-number">50</span>  <span class="hljs-comment"># 打印速度，数字越大越慢</span>
    <span class="hljs-attr">cursorChar:</span> <span class="hljs-string">&quot;_&quot;</span> <span class="hljs-comment"># 游标字符</span>
    <span class="hljs-attr">loop:</span> <span class="hljs-literal">false</span> <span class="hljs-comment"># 是否循环播放效果</span>
  <span class="hljs-attr">mouse_click:</span>  <span class="hljs-comment"># 鼠标点击动效</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">style:</span> <span class="hljs-string">fireworks</span> <span class="hljs-comment"># 目前设置两个值：values（价值观词汇） | love（爱心）| fireworks (烟花) </span>
  
<span class="hljs-comment"># 指定自定义 css 文件路径，路径是相对 source 目录，如 /css/custom.css 同上，支持列表</span>
<span class="hljs-attr">custom_css:</span>
    <span class="hljs-bullet">-</span> <span class="hljs-string">/css/custom.css</span>
    
<span class="hljs-attr">navbar:</span>
  <span class="hljs-attr">blog_title:</span> <span class="hljs-string">Vin&#x27;s</span> <span class="hljs-string">Blog</span>  <span class="hljs-comment"># 导航栏左侧的标题，为空则按 hexo config.title 显示</span>
  <span class="hljs-attr">ground_glass:</span>  <span class="hljs-comment"># 导航栏毛玻璃特效，实验性功能，可能会造成页面滚动掉帧和抖动，部分浏览器不支持会自动不生效</span>
    <span class="hljs-attr">enable:</span> <span class="hljs-literal">true</span>
    <span class="hljs-attr">px:</span> <span class="hljs-number">3</span>  <span class="hljs-comment"># 模糊像素，只能为数字，数字越大模糊度越高</span>
    <span class="hljs-attr">alpha:</span> <span class="hljs-number">0.8</span>   <span class="hljs-comment"># 透明度，只能为数字，范围 0~1，数字越大透明度越低，注意透明过度可能看不清菜单字体</span>

<span class="hljs-comment"># 统一各种页头图片</span>
<span class="hljs-attr">banner_img:</span> <span class="hljs-string">https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/img/20201001115214.jpg</span>

<span class="hljs-comment"># 标签页</span>
<span class="hljs-attr">tag:</span>
  <span class="hljs-attr">banner_img_height:</span> <span class="hljs-number">60</span>  <span class="hljs-comment"># available: 0 - 100</span>
  <span class="hljs-attr">banner_mask_alpha:</span> <span class="hljs-number">0.3</span>  <span class="hljs-comment"># available: 0 - 1.0</span>
  <span class="hljs-attr">subtitle:</span>  <span class="hljs-comment"># 打字机内容</span>
  <span class="hljs-attr">tagcloud:</span> <span class="hljs-comment"># 标签云</span>
    <span class="hljs-attr">min_font:</span> <span class="hljs-number">18</span>
    <span class="hljs-attr">max_font:</span> <span class="hljs-number">30</span>
    <span class="hljs-attr">unit:</span> <span class="hljs-string">px</span>  <span class="hljs-comment"># 字号单位</span>
    <span class="hljs-attr">start_color:</span> <span class="hljs-string">&quot;#6441A5&quot;</span>
    <span class="hljs-attr">end_color:</span> <span class="hljs-string">&quot;#EF8E38&quot;</span></code></pre></div>





<h3 id="1-layout-目录"><a href="#1-layout-目录" class="headerlink" title="1. layout 目录"></a>1. layout 目录</h3><p>layout 目录下存放的是页面布局文件，功能模块文件以及全局引用的 js/css 文件模块。</p>
<p>layout 目录组成如下表所示：</p>
<table>
    <tr>
        <th rowspan="17" style="align: center; background-color: #F0EFEA">layout<br>&nbsp;&nbsp;目录</th>
        <th>文件名称</th>
        <th>文件用途</th>
    </tr>
    <tr>
        <td>404.ejs</td>
        <td>404页</td>
    </tr>
    <tr>
        <td>aobout.ejs</td>
        <td>关于页</td>
    </tr>
    <tr>
        <td>archive.ejs</td>
        <td>归档页</td>
    </tr>
    <tr>
        <td>categories.ejs</td>
        <td>分类页</td>
    </tr>
    <tr>
        <td>category.ejs</td>
        <td>分类页下的分类列表组件</td>
    </tr>
    <tr>
        <td>index.ejs</td>
        <td>首页文章列表组件(魔改补充了分割线)</td>
    </tr>
    <tr>
        <td>layout.ejs</td>
        <td>首页布局</td>
    </tr>
    <tr>
        <td>links.ejs</td>
        <td>友链页</td>
    </tr>
    <tr>
        <td>page.ejs</td>
        <td>首页布局</td>
    </tr>
    <tr>
        <td>post.ejs</td>
        <td>文章详情页</td>
    </tr>
     <tr>
        <td>tag.ejs</td>
        <td>标签页</td>
    </tr>
    <tr>
        <td>tags.ejs</td>
        <td>标签云组件</td>
    </tr>
</table>



<p>子目录 _partial 组成如下表所示：</p>
<table>
    <tr>
        <th rowspan="12" style="align: center; background-color: #F0EFEA">_partial<br>&nbsp;&nbsp;目录</th>
        <th>文件名称</th>
        <th>文件用途</th>
    </tr>
    <tr>
        <td>beian.ejs</td>
        <td>备案页</td>
    </tr>
    <tr>
        <td>css.ejs</td>
        <td>主题 CSS 模块</td>
    </tr>
    <tr>
        <td>footer.ejs</td>
        <td>页脚组件</td>
    </tr>
    <tr>
        <td>head.ejs</td>
        <td>页头组件</td>
    </tr>
    <tr>
        <td>nav.ejs</td>
        <td>顶栏组件</td>
    </tr>
    <tr>
        <td>paginator.ejs</td>
        <td>分页组件</td>
    </tr>
    <tr>
        <td>post-meta.ejs</td>
        <td>发布文章元数据</td>
    </tr>
    <tr>
        <td>scripts.ejs</td>
        <td>主题 js 模块</td>
    </tr>
    <tr>
        <td>search.ejs</td>
        <td>搜索框布局</td>
    </tr>
    <tr>
        <td>statistics.ejs</td>
        <td>网站统计组件</td>
    </tr>
     <tr>
        <td>toc.ejs</td>
        <td>目录组件</td>
    </tr>
</table>



<p>_partial 子目录 comments 组成如下表所示：</p>
<table>
    <tr>
        <th rowspan="12" style="align: center; background-color: #F0EFEA">comments<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;目录</th>
        <th>文件名称</th>
        <th>文件用途</th>
    </tr>
    <tr>
        <td>changyan.ejs</td>
        <td>畅言模块</td>
    </tr>
    <tr>
        <td>disqus.ejs</td>
        <td>Disqus 模块</td>
    </tr>
    <tr>
        <td>gitalk.ejs</td>
        <td>Gitalk 模块</td>
    </tr>
    <tr>
        <td>livere.ejs</td>
        <td>Livere 模块</td>
    </tr>
    <tr>
        <td>remark42.ejs</td>
        <td>remark42 模块</td>
    </tr>
    <tr>
        <td>utterances.ejs</td>
        <td>utterances 模块</td>
    </tr>
    <tr>
        <td>valine.ejs</td>
        <td>Valine 模块</td>
    </tr>
</table>



<p>_partial 子目录 plugins 组成如下表所示：</p>
<table>
    <tr>
        <th rowspan="14" style="align: center; background-color: #F0EFEA">plugins<br>&nbsp;&nbsp;目录</th>
        <th>文件名称</th>
        <th>文件用途</th>
    </tr>
    <tr>
        <td>analytics.ejs</td>
        <td>网站统计</td>
    </tr>
    <tr>
        <td>anchor.ejs</td>
        <td>文章标题锚点</td>
    </tr>
    <tr>
        <td>fancybox.ejs</td>
        <td>图片组件</td>
    </tr>
    <tr>
        <td>leancloud.ejs</td>
        <td>LeanCloud 组件</td>
    </tr>
    <tr>
        <td>local-search.ejs</td>
        <td>搜索组件</td>
    </tr>
    <tr>
        <td>math.ejs</td>
        <td>数学公式模块</td>
    </tr>
    <tr>
        <td>mermaid.ejs</td>
        <td>mermaid 图模块</td>
    </tr>
    <tr>
        <td>local-search.ejs</td>
        <td>搜索组件</td>
    </tr>
    <tr>
        <td>tocjs.ejs</td>
        <td>目录模块</td>
    </tr>
    <tr>
        <td>typed.ejs</td>
        <td>打字机模块</td>
    </tr>
</table>



<h3 id="2-srcipts-目录"><a href="#2-srcipts-目录" class="headerlink" title="2. srcipts 目录"></a>2. srcipts 目录</h3><p>srcipts 目录存放实现页面功能的 js 文件，其中添加了 <code>injector</code> 作为注入器，方便注入如鼠标动效、音乐播放器等功能组件。</p>
<h4 id="修改代码高亮区域样式"><a href="#修改代码高亮区域样式" class="headerlink" title="修改代码高亮区域样式"></a>修改代码高亮区域样式</h4><p>代码高亮的文件在 <code>events/lib/highlight.js</code>，通过以下两个改动实现在代码顶栏处添加样式，以作区分。</p>
<p>同时代码高亮的<strong>字体</strong>在自定义的 <code>custom.css</code> 文件中实现。</p>
<pre class="hljs-wrap"><code data-rel="Code" class="hljs javascript"><span class="hljs-comment">/* 改动1 */</span>
<span class="hljs-comment">// 借助高亮背景 修改了代码样式的 dom 结构</span>
<span class="hljs-keyword">if</span> (config.code.highlight.highlightjs.bg_color) &#123;
    hexo.extend.filter.register(<span class="hljs-string">&#x27;after_render:html&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">html, data</span>) =&gt;</span> &#123;
        <span class="hljs-keyword">return</span> html.replace(<span class="hljs-regexp">/(?&lt;!&lt;div class=&quot;hljs&quot;&gt;)&lt;pre.*?(class=&quot;.+?&quot;.*?)*&gt;(.*?)&lt;\/pre&gt;/gi</span>s, <span class="hljs-function">(<span class="hljs-params">str, p1, p2</span>) =&gt;</span> &#123;
            <span class="hljs-keyword">if</span> (p2.search(<span class="hljs-regexp">/mermaid/</span>) == <span class="hljs-number">-1</span>) &#123;
                <span class="hljs-comment">// str = `&lt;div class=&quot;hljs&quot;&gt;&lt;pre$&#123;p1 ? p1.replace(&#x27;class=&quot;&#x27;, &#x27; class=&quot;hljs &#x27;) : &#x27;&#x27;&#125;&gt;$&#123;p2&#125;&lt;/pre&gt;&lt;/div&gt;`;</span>
                str = <span class="hljs-string">`&lt;div class=&quot;hljs&quot;&gt;&lt;pre<span class="hljs-subst">$&#123;p1 ? p1 : <span class="hljs-string">&#x27;&#x27;</span>&#125;</span>&gt;<span class="hljs-subst">$&#123;p2&#125;</span>&lt;/pre&gt;&lt;/div&gt;`</span>;            
            &#125;
            <span class="hljs-comment">// 替换操作</span>
            <span class="hljs-keyword">return</span> replaceTag(str);
        &#125;);
    &#125;);
&#125;

<span class="hljs-comment">/* 改动2 */</span>
<span class="hljs-comment">// 给 pre 标签添加 &#x27;class=&quot;hljs-wrap&quot;&#x27;; 给 code 标签添加静态标记</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">replaceTag</span>(<span class="hljs-params">str</span>)</span>&#123;
  <span class="hljs-keyword">return</span> str.replace(<span class="hljs-string">&#x27;&lt;pre&gt;&#x27;</span>, <span class="hljs-string">&#x27;&lt;pre class=&quot;hljs-wrap&quot;&gt;&#x27;</span>).replace(<span class="hljs-string">&#x27;&lt;code c&#x27;</span>, <span class="hljs-string">&#x27;&lt;code data-rel=&quot;Code&quot; c&#x27;</span>);
&#125;</code></pre>





<h4 id="添加鼠标动效"><a href="#添加鼠标动效" class="headerlink" title="添加鼠标动效"></a>添加鼠标动效</h4><p>在 fluid-1.8.4 及之后的版本中，主题使用 <a target="_blank" rel="noopener" href="https://hexo.fluid-dev.com/posts/hexo-injector">Hexo 注入器</a> 实现功能组件的拓展，以下是添加示例。</p>
<p>在 <code>js/injector</code> 目录下创建 <code>index.js</code> 文件，添加如下内容：</p>
<div class="hljs"><pre class="hljs-wrap"><code data-rel="Code" class="hljs javascript"><span class="hljs-comment">// 注入鼠标点击动效</span>
hexo.extend.injector.register(<span class="hljs-string">&#x27;body_begin&#x27;</span>, <span class="hljs-string">`</span>
<span class="hljs-string">    &lt;script src=&quot;//cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/js/mouse-fireworks.js&quot;&gt;&lt;/script&gt;`</span>);</code></pre></div>



<h3 id="3-source-目录"><a href="#3-source-目录" class="headerlink" title="3. source 目录"></a>3. source 目录</h3><p>srcipts 目录存放全局所需的资源文件，如js、css、img、lib等，主要是添加样式文件 <code>custom.css</code>。</p>
<p>同时在 <code>source/js</code> 下添加 <code>mod</code> 目录，添加<strong>时间插件与一言插件</strong>，方便在修改页脚内容时调用。</p>
<p>另外更换了 <code>img</code> 目录下的 <code>loading.gif</code> 文件。</p>
<h3 id="4-杂项"><a href="#4-杂项" class="headerlink" title="4. 杂项"></a>4. 杂项</h3><p>包括 languages 目录以及git相关的文件，一般是在修改 <code>navbar</code> 顶栏的文字才用到，这边不多赘述。</p>
<h2 id="自定义修改主题"><a href="#自定义修改主题" class="headerlink" title="自定义修改主题"></a>自定义修改主题</h2><h3 id="1-自定义主题样式-custom-css"><a href="#1-自定义主题样式-custom-css" class="headerlink" title="1. 自定义主题样式(custom.css)"></a>1. 自定义主题样式(custom.css)</h3><p>自定义样式文件放入 <code>css</code> 目录下，实现修改主题样式的效果，比较灵活。    </p>
<div class="hljs"><pre class="hljs-wrap"><code data-rel="Code" class="hljs css"><span class="hljs-comment">/* Markdown 相关设置 */</span>
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">pre</span> &#123;
  <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">5px</span>;
&#125;
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">pre</span> <span class="hljs-selector-tag">code</span> &#123;
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">1rem</span> <span class="hljs-number">0</span> <span class="hljs-number">0.5rem</span> <span class="hljs-number">0</span>;
&#125;

<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-class">.drop-cap</span> &#123;
  <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">10px</span> <span class="hljs-meta">!important</span>;
&#125;

<span class="hljs-comment">/* 列表样式 */</span>
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">p</span>,
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">ol</span>,
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">ul</span> &#123;
  <span class="hljs-attribute">line-height</span>: <span class="hljs-number">2</span>;
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">19px</span>;
&#125;

<span class="hljs-comment">/* 粗体样式 */</span>
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">strong</span> &#123;
  <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">700</span>;
&#125;

<span class="hljs-comment">/* 文本高亮样式 */</span>
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">mark</span> &#123;
  <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fdf0b3</span>;
&#125;

<span class="hljs-comment">/* 引用块样式 */</span>
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">blockquote</span> &#123;
  <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span> <span class="hljs-number">1em</span>;
  <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#F2F2F2</span>;
  <span class="hljs-attribute">border-left</span>: .<span class="hljs-number">25em</span> solid <span class="hljs-number">#428bca</span>;
&#125;

<span class="hljs-comment">/* 代码顶栏 */</span>
<span class="hljs-selector-class">.hljs-wrap</span><span class="hljs-selector-pseudo">::before</span> &#123;
  <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot; &quot;</span>;
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#fc625d</span>;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>;
  <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">20px</span> <span class="hljs-number">0</span> <span class="hljs-number">#fdbc40</span>, <span class="hljs-number">40px</span> <span class="hljs-number">0</span> <span class="hljs-number">#35cd4b</span>;
  <span class="hljs-attribute">margin-top</span>: -<span class="hljs-number">5px</span>;
  <span class="hljs-attribute">left</span>: <span class="hljs-number">12px</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">12px</span>;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">12px</span>;
&#125;

<span class="hljs-selector-class">.hljs-wrap</span> <span class="hljs-selector-tag">code</span><span class="hljs-selector-attr">[data-rel]</span><span class="hljs-selector-pseudo">::before</span> &#123;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#F6F8FA</span>;
  <span class="hljs-attribute">content</span>: <span class="hljs-built_in">attr</span>(data-rel);
  <span class="hljs-attribute">line-height</span>: <span class="hljs-number">38px</span>;
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">16px</span>;
  <span class="hljs-attribute">position</span>: absolute;
  <span class="hljs-attribute">margin-top</span>: -<span class="hljs-number">35px</span>;
  <span class="hljs-attribute">left</span>: <span class="hljs-number">0</span>;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">font-family</span>: Arial, sans-serif;
  <span class="hljs-attribute">font-weight</span>: <span class="hljs-number">700</span>;
  <span class="hljs-attribute">text-align</span>: center;
&#125;

<span class="hljs-comment">/* 代码全局字体(由外置的 font.css 定义) */</span>
<span class="hljs-selector-class">.hljs</span> &#123;
  <span class="hljs-attribute">font-family</span>: <span class="hljs-string">&quot;Code Font&quot;</span> <span class="hljs-meta">!important</span>;
&#125;

<span class="hljs-comment">/* 链接样式 */</span>
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:hover</span> &#123;
  <span class="hljs-attribute">text-decoration</span>: none;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#15967d</span>;
&#125;

<span class="hljs-comment">/* 文章图片样式 */</span>
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">p</span> &gt; <span class="hljs-selector-tag">img</span>,
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">p</span> &gt; <span class="hljs-selector-tag">a</span> &gt; <span class="hljs-selector-tag">img</span> &#123;
  <span class="hljs-attribute">max-width</span>: <span class="hljs-number">95%</span>;
&#125;

<span class="hljs-comment">/* 文章标题 hover 样式 */</span>
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">h1</span><span class="hljs-selector-pseudo">:hover</span>,
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">h2</span><span class="hljs-selector-pseudo">:hover</span>,
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">h3</span><span class="hljs-selector-pseudo">:hover</span>,
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">h4</span><span class="hljs-selector-pseudo">:hover</span>,
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">h5</span><span class="hljs-selector-pseudo">:hover</span>,
<span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-tag">h6</span><span class="hljs-selector-pseudo">:hover</span> &#123;
  <span class="hljs-attribute">padding-left</span>: <span class="hljs-number">0.5rem</span>;
&#125;

<span class="hljs-comment">/* 小代码块样式 */</span>
<span class="hljs-selector-tag">code</span> &#123;
  <span class="hljs-attribute">color</span>: darkred;
&#125;
<span class="hljs-selector-attr">[data-user-color-scheme=<span class="hljs-string">&quot;dark&quot;</span>]</span> <span class="hljs-selector-class">.markdown-body</span> <span class="hljs-selector-pseudo">:not(pre)</span> &gt; <span class="hljs-selector-tag">code</span> &#123;
  <span class="hljs-attribute">color</span>: yellow;
&#125;

<span class="hljs-comment">/* 鼠标样式 */</span>
<span class="hljs-comment">/* body,</span>
<span class="hljs-comment">.banner &#123;</span>
<span class="hljs-comment">  cursor: url(https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/other/bibata/Arrow.cur),</span>
<span class="hljs-comment">    auto;</span>
<span class="hljs-comment">&#125;</span>
<span class="hljs-comment"></span>
<span class="hljs-comment">body a &#123;</span>
<span class="hljs-comment">  cursor: url(https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/other/bibata/Hand.cur),</span>
<span class="hljs-comment">    pointer;</span>
<span class="hljs-comment">&#125; */</span>

<span class="hljs-comment">/* p, ul, :not(button) &gt; span &#123;</span>
<span class="hljs-comment">  cursor: url(https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/other/bibata/IBeam.cur),</span>
<span class="hljs-comment">    text;</span>
<span class="hljs-comment">&#125; */</span>

<span class="hljs-comment">/* 搜索关键字样式 */</span>
<span class="hljs-selector-class">.md-form</span> <span class="hljs-selector-tag">label</span> &#123;
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">0.95rem</span>;
&#125;
<span class="hljs-selector-class">.md-form</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type]</span><span class="hljs-selector-class">.valid</span> + <span class="hljs-selector-tag">label</span>,
<span class="hljs-selector-class">.md-form</span> <span class="hljs-selector-tag">input</span><span class="hljs-selector-attr">[type]</span><span class="hljs-selector-pseudo">:focus.valid</span> + <span class="hljs-selector-tag">label</span> &#123;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#00af2c</span>;
&#125;

<span class="hljs-comment">/* 顶栏文字字体大小 */</span>
<span class="hljs-selector-class">.navbar</span> &#123;
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">0.9rem</span>;
&#125;

<span class="hljs-comment">/* 分页组件样式 */</span>
<span class="hljs-selector-class">.pagination</span> <span class="hljs-selector-tag">a</span> &#123;
  <span class="hljs-attribute">font-weight</span>: bold;
  <span class="hljs-attribute">font-size</span>: large;
&#125;

<span class="hljs-selector-class">.pagination</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-pseudo">:hover</span>,
<span class="hljs-selector-class">.pagination</span> <span class="hljs-selector-class">.current</span> &#123;
  <span class="hljs-attribute">font-weight</span>: bold;
  <span class="hljs-attribute">font-size</span>: large;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#fff9e2</span>;
  <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">30%</span>;
  <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>, <span class="hljs-number">150</span>, <span class="hljs-number">136</span>, <span class="hljs-number">0.9</span>);
&#125;

<span class="hljs-comment">/* 文字选中样式 */</span>
<span class="hljs-selector-pseudo">::selection</span>&#123;
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#30A9DE</span>;
  <span class="hljs-attribute">color</span>: white;
&#125;

<span class="hljs-comment">/* 首页文章列表标题高度 */</span>
<span class="hljs-selector-class">.index-header</span> &#123;
  <span class="hljs-attribute">line-height</span>: <span class="hljs-number">1.35</span>;
&#125;

<span class="hljs-comment">/* 首页文章列表分割线样式 */</span>
<span class="hljs-selector-class">.line</span> &#123;
  <span class="hljs-attribute">display</span>: flex;
  <span class="hljs-attribute">transition-delay</span>: <span class="hljs-number">0.5s</span>;
  <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">2px</span>;
  <span class="hljs-attribute">align-items</span>: center;
  <span class="hljs-attribute">font-size</span>: <span class="hljs-number">14px</span>;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#999</span>;
&#125;

<span class="hljs-selector-class">.line</span><span class="hljs-selector-pseudo">::before</span>,
<span class="hljs-selector-class">.line</span><span class="hljs-selector-pseudo">::after</span> &#123;
  <span class="hljs-attribute">content</span>: <span class="hljs-string">&#x27;&#x27;</span>;
  <span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;
  <span class="hljs-attribute">height</span>: <span class="hljs-number">2px</span>;
  <span class="hljs-attribute">background</span>: <span class="hljs-number">#ccc</span>;
&#125;

<span class="hljs-comment">/* 首页文章置顶图标样式 */</span>
<span class="hljs-selector-class">.icon-top</span><span class="hljs-selector-pseudo">:before</span> &#123;
  <span class="hljs-attribute">font-size</span>: x-large;
  <span class="hljs-attribute">color</span>: <span class="hljs-number">#FF7242</span>;
&#125;

<span class="hljs-comment">/* 首页文章贴图样式 */</span>
<span class="hljs-selector-class">.index-img</span> <span class="hljs-selector-tag">img</span> &#123;
  <span class="hljs-attribute">width</span>: <span class="hljs-number">101%</span>;
  <span class="hljs-attribute">transition</span>: all <span class="hljs-number">0.6s</span>;
&#125;
<span class="hljs-selector-class">.index-img</span> <span class="hljs-selector-tag">img</span><span class="hljs-selector-pseudo">:hover</span> &#123;
  <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">scale</span>(<span class="hljs-number">1.1</span>);
  <span class="hljs-attribute">box-shadow</span>: <span class="hljs-number">0px</span> <span class="hljs-number">0px</span> <span class="hljs-number">16px</span> <span class="hljs-built_in">rgba</span>(<span class="hljs-number">23</span>, <span class="hljs-number">106</span>, <span class="hljs-number">196</span>, <span class="hljs-number">0.6</span>);
&#125;</code></pre></div>



<h3 id="2-自定义字体样式-font-css"><a href="#2-自定义字体样式-font-css" class="headerlink" title="2. 自定义字体样式(font.css)"></a>2. 自定义字体样式(font.css)</h3><p>将 <code>font.css</code> 放在远程仓库上，同时做好<a href="../../../10/16/10-16-Record-Compress-Font/#%E5%AD%97%E4%BD%93%E4%BF%AE%E5%A4%8D-%E7%B2%97%E4%BD%93-bug">字体子集化</a>的工作，方便在<code>_config.yml</code>灵活调用不同的字体。</p>
<div class="hljs"><pre class="hljs-wrap"><code data-rel="Code" class="hljs yaml"><span class="hljs-attr">font:</span>  <span class="hljs-comment"># 主题字体配置</span>
  <span class="hljs-attr">font_size:</span> <span class="hljs-string">18px</span>                   <span class="hljs-comment"># 全局字号</span>
  <span class="hljs-attr">font_family:</span> <span class="hljs-string">&quot;OPPO Sans SC&quot;</span>       <span class="hljs-comment"># 全局字体</span>
  <span class="hljs-attr">code_font_size:</span> <span class="hljs-string">18px</span>              <span class="hljs-comment"># 代码的字号</span>

<span class="hljs-comment"># 自定义底部 HTML 内容（位于 footer 上方），也可用于外部引入 js css 这些操作，注意不要和 post.custom 配置冲突</span>
<span class="hljs-attr">custom_html:</span> 
    <span class="hljs-string">&#x27;&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/css/font.css&quot;&gt;&#x27;</span></code></pre></div>



<h3 id="3-自定义主题模块样式"><a href="#3-自定义主题模块样式" class="headerlink" title="3. 自定义主题模块样式"></a>3. 自定义主题模块样式</h3><h4 id="主页文章列表补充分割线"><a href="#主页文章列表补充分割线" class="headerlink" title="主页文章列表补充分割线"></a>主页文章列表补充分割线</h4><p>主页模板文件为 <code>layout/index.ejs</code>，添加 <code>line</code> 属性</p>
<div class="hljs"><pre class="hljs-wrap"><code data-rel="Code" class="hljs ejs">... &lt;&#x2F;div&gt;
&lt;!-- 分割线 --&gt;
&lt;div class&#x3D;&quot;line&quot;&#x2F;&gt;
... &lt;&#x2F;article&gt;</code></pre></div>



<h4 id="修改打字机模块"><a href="#修改打字机模块" class="headerlink" title="修改打字机模块"></a>修改打字机模块</h4><p>打字机特效文件为 <code>_partial/plugins/typed.ejs</code>，魔改的内容是添加一言/今日诗词插件。</p>
<div class="hljs"><pre class="hljs-wrap"><code data-rel="Code" class="hljs ejs">&lt;!-- 打字机特效(魔改后) --&gt;
...&lt;% if(theme.fun_features.typing.enable &amp;&amp; page.subtitle !&#x3D;&#x3D; false)&#123; %&gt;
...  &lt;%- js_ex(theme.static_prefix.typed, &quot;&#x2F;typed.min.js&quot;) %&gt;

    &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;
        !function(e)&#123;var n,t&#x3D;&#123;&#125;,o&#x3D;&quot;jinrishici-token&quot;;function i()&#123;return document.getElementById(&quot;jinrishici-sentence&quot;)||0!&#x3D;document.getElementsByClassName(&quot;jinrishici-sentence&quot;).length&#125;function c()&#123;t.load(function(e)&#123;var n&#x3D;document.getElementById(&quot;jinrishici-sentence&quot;),t&#x3D;document.getElementsByClassName(&quot;jinrishici-sentence&quot;);if(n&amp;&amp;(n.innerText&#x3D;e.data.content),0!&#x3D;&#x3D;t.length)for(var o&#x3D;0;o&lt;t.length;o++)t[o].innerText&#x3D;e.data.content&#125;)&#125;function r(e,n)&#123;var t&#x3D;new XMLHttpRequest;t.open(&quot;get&quot;,n),t.withCredentials&#x3D;!0,t.send(),t.onreadystatechange&#x3D;function(n)&#123;if(4&#x3D;&#x3D;&#x3D;t.readyState)&#123;var o&#x3D;JSON.parse(t.responseText);&quot;success&quot;&#x3D;&#x3D;&#x3D;o.status?e(o):console.error(&quot;今日诗词API加载失败，错误原因：&quot;+o.errMessage)&#125;&#125;&#125;t.load&#x3D;function(n)&#123;return e.localStorage&amp;&amp;e.localStorage.getItem(o)?function(e,n)&#123;return r(e,&quot;https:&#x2F;&#x2F;v2.jinrishici.com&#x2F;one.json?client&#x3D;browser-sdk&#x2F;1.2&amp;X-User-Token&#x3D;&quot;+encodeURIComponent(n))&#125;(n,e.localStorage.getItem(o)):function(n)&#123;return r(function(t)&#123;e.localStorage.setItem(o,t.token),n(t)&#125;,&quot;https:&#x2F;&#x2F;v2.jinrishici.com&#x2F;one.json?client&#x3D;browser-sdk&#x2F;1.2&quot;)&#125;(n)&#125;,e.jinrishici&#x3D;t,i()?c():(n&#x3D;function()&#123;i()&amp;&amp;c()&#125;,&quot;loading&quot;!&#x3D;document.readyState?n():document.addEventListener?document.addEventListener(&quot;DOMContentLoaded&quot;,n):document.attachEvent(&quot;onreadystatechange&quot;,function()&#123;&quot;complete&quot;&#x3D;&#x3D;document.readyState&amp;&amp;n()&#125;))&#125;(window); 
        &#x2F;&#x2F; 输出指定数量空格+引用
        function writeSpace(len)&#123;
          len &#x3D; (len &gt; 10) ? (len &gt; 31 ? 0 : 8) : len
          var space &#x3D; &#39;&#39;
          for(var i &#x3D; 0; i&lt;len; i++)&#123;
            space +&#x3D; &#39;&amp;emsp;&#39;
          &#125;
          return space+&quot;——&quot;;
        &#125;

        &#x2F;&#x2F; 执行打字机动效
        function startTyping(strs)&#123;
          var typed &#x3D; new Typed(&#39;#subtitle&#39;, &#123;
          strings: [&#39;  &#39;, strs],
          cursorChar: &quot;&lt;%- theme.fun_features.typing.cursorChar %&gt;&quot;,
          typeSpeed: &lt;%- theme.fun_features.typing.typeSpeed %&gt;,
          loop: &lt;%- theme.fun_features.typing.loop %&gt;,
          &#125;);
          typed.stop();
          $(document).ready(function () &#123;
            $(&quot;.typed-cursor&quot;).addClass(&quot;h2&quot;);
            typed.start();
          &#125;); 
        &#125;
    &lt;&#x2F;script&gt;
  &lt;% if(is_home()) &#123; %&gt;
    &lt;script type&#x3D;&quot;text&#x2F;javascript&quot;&gt;
      var strs &#x3D; &quot;&lt;%- data.subtitle %&gt;&amp;nbsp;&quot; + &quot;&lt;br&gt;&lt;br&gt;&quot;;
      var resLen &#x3D; 0;
      &#x2F;&#x2F; 随机显示 一言或今日诗词
      if(Math.random() &lt; 0.5)&#123;
        jinrishici.load(function(result) &#123;
          var res &#x3D; result.data.origin;
          resLen &#x3D; res.dynasty.length + res.author.length + res.title.length;
          strs +&#x3D; result.data.content + &quot;&lt;br&gt;&quot; 
            + writeSpace(resLen)
            + &#39;【&#39; + res.dynasty + &#39;】&#39; + res.author + &#39;《&#39; + res.title + &#39;》&#39;;
            startTyping(strs);
        &#125;); 
      &#125; else &#123;
        fetch(&#39;https:&#x2F;&#x2F;v1.hitokoto.cn&#39;)
        .then(response &#x3D;&gt; response.json())
        .then(data &#x3D;&gt; &#123;
          strs +&#x3D; data.hitokoto + &quot;&lt;br&gt;&quot; 
                + writeSpace(8)
                + (data.from_who || &#39;&#39;)
                + (data.from_who &#x3D;&#x3D; data.from ? &#39;&#39; : &#39;「&#39; + data.from + &#39;」&#39;);
          startTyping(strs);
        &#125;)
        .catch(console.error)
      &#125;
    &lt;&#x2F;script&gt;
  &lt;% &#125; else &#123; %&gt;
    &lt;script&gt;
      &#x2F;&#x2F; 非首页 则输出文章标题
      var strs &#x3D; &quot;&lt;%- data.subtitle %&gt;&amp;nbsp;&quot;;
      startTyping(strs);
    &lt;&#x2F;script&gt;
  &lt;% &#125; %&gt;

...&lt;% &#125; %&gt;</code></pre></div>



<h4 id="修改页脚内容"><a href="#修改页脚内容" class="headerlink" title="修改页脚内容"></a>修改页脚内容</h4><p>fluid-1.8.4 版本后直接在 <code>_config.yml</code> 中修改 <code>footer</code> 属性</p>
<div class="hljs"><pre class="hljs-wrap"><code data-rel="Code" class="hljs yaml"><span class="hljs-attr">footer:</span>
  <span class="hljs-attr">content:</span> <span class="hljs-string">&#x27;</span>
<span class="hljs-string">    &lt;span&gt;©2020 by Lin&lt;br&gt;驱动&lt;/span&gt;</span>
<span class="hljs-string">    &lt;a href=&quot;https://hexo.io&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;Hexo&lt;/a&gt;</span>
<span class="hljs-string">    &lt;span&gt;|&amp;nbsp;主题&lt;/span&gt;</span>
<span class="hljs-string">    &lt;a href=&quot;https://github.com/fluid-dev/hexo-theme-fluid&quot; target=&quot;_blank&quot; rel=&quot;nofollow noopener&quot;&gt;Fluid&lt;/a&gt;</span>
<span class="hljs-string">    &lt;div&gt;</span>
<span class="hljs-string">      &lt;span id=&quot;timeDate&quot;&gt;载入天数...&lt;/span&gt;</span>
<span class="hljs-string">      &lt;span id=&quot;times&quot;&gt;载入时分秒...&lt;/span&gt;</span>
<span class="hljs-string">      &lt;script src=&quot;/js/mod/duration.js&quot;&gt;&lt;/script&gt;</span>
<span class="hljs-string">    &lt;/div&gt;</span>
<span class="hljs-string">    &lt;div&gt;</span>
<span class="hljs-string">      &lt;p style=&quot;font-size: 18px; font-weight: bold;&quot; id=&quot;hitokoto&quot;&gt;:D 获取中...&lt;/p&gt;</span>
<span class="hljs-string">      &lt;script src=&quot;/js/mod/hitokoto.js&quot;&gt;&lt;/script&gt;</span>
<span class="hljs-string">    &lt;/div&gt;</span>
<span class="hljs-string"> &#x27;</span></code></pre></div>



<h2 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h2><ul>
<li><a target="_blank" rel="noopener" href="https://hexo.fluid-dev.com/docs/guide/">Fluid 配置指南</a></li>
<li><a target="_blank" rel="noopener" href="https://www.webdesignrankings.com/resources/lolcolors/">主题颜色配置</a></li>
<li><a target="_blank" rel="noopener" href="https://hexo.fluid-dev.com/posts/hexo-injector">Hexo 注入器使用指南</a></li>
</ul>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/Hexo/">Hexo</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/Fluid/">Fluid</a>
                    
                      <a class="hover-with-bg" href="/tags/Hexo/">Hexo</a>
                    
                  </div>
                
              </div>
              
              
                <div class="post-prevnext row">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2020/10/24/10-24-Redis-Interview/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">Redis 是何物</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2020/10/17/10-17-Common-Mysql-Commands/">
                        <span class="hidden-mobile">MySQL 命令大全</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
      <div class="col-lg-7 mx-auto nopadding-md">
        <div class="container custom mx-auto">
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/vin9712/cdnRes@cdn/blog/hexo/css/font.css">
        </div>
      </div>
    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <span>©2020 by Lin<br>驱动</span> <a href="https://hexo.io" target="_blank" rel="nofollow noopener">Hexo</a> <span>|&nbsp;主题</span> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener">Fluid</a> <div> <span id="timeDate">载入天数...</span> <span id="times">载入时分秒...</span> <script src="/js/mod/duration.js"></script> </div> <div> <p style="font-size: 18px; font-weight: bold;" id="hitokoto">:D 获取中...</p> <script src="/js/mod/hitokoto.js"></script> </div> 
  </div>
  

  

  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":200})
    NProgress.start()
    document.addEventListener('DOMContentLoaded', function() {
      window.NProgress && window.NProgress.inc();
    })
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.5.3/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/lazyload.js" ></script>
  



  



  <script  src="https://cdn.staticfile.org/tocbot/4.12.0/tocbot.min.js" ></script>



  <script  src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js" ></script>





  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>




<!-- 1.8.5 的原版的不好用 还是换回来了 -->
<!-- 打字机特效 -->

  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
    <script type="text/javascript">
        !function(e){var n,t={},o="jinrishici-token";function i(){return document.getElementById("jinrishici-sentence")||0!=document.getElementsByClassName("jinrishici-sentence").length}function c(){t.load(function(e){var n=document.getElementById("jinrishici-sentence"),t=document.getElementsByClassName("jinrishici-sentence");if(n&&(n.innerText=e.data.content),0!==t.length)for(var o=0;o<t.length;o++)t[o].innerText=e.data.content})}function r(e,n){var t=new XMLHttpRequest;t.open("get",n),t.withCredentials=!0,t.send(),t.onreadystatechange=function(n){if(4===t.readyState){var o=JSON.parse(t.responseText);"success"===o.status?e(o):console.error("今日诗词API加载失败，错误原因："+o.errMessage)}}}t.load=function(n){return e.localStorage&&e.localStorage.getItem(o)?function(e,n){return r(e,"https://v2.jinrishici.com/one.json?client=browser-sdk/1.2&X-User-Token="+encodeURIComponent(n))}(n,e.localStorage.getItem(o)):function(n){return r(function(t){e.localStorage.setItem(o,t.token),n(t)},"https://v2.jinrishici.com/one.json?client=browser-sdk/1.2")}(n)},e.jinrishici=t,i()?c():(n=function(){i()&&c()},"loading"!=document.readyState?n():document.addEventListener?document.addEventListener("DOMContentLoaded",n):document.attachEvent("onreadystatechange",function(){"complete"==document.readyState&&n()}))}(window); 
        // 输出指定数量空格+引用
        function writeSpace(len){
          len = (len > 10) ? (len > 31 ? 0 : 8) : len
          var space = ''
          for(var i = 0; i<len; i++){
            space += '&emsp;'
          }
          return space+"——";
        }

        // 执行打字机动效
        function startTyping(strs){
          var typed = new Typed('#subtitle', {
          strings: ['  ', strs],
          cursorChar: "_",
          typeSpeed: 50,
          loop: false,
          });
          typed.stop();
          $(document).ready(function () {
            $(".typed-cursor").addClass("h2");
            typed.start();
          }); 
        }
    </script>
  
    <script>
      // 非首页 则输出文章标题
      var strs = document.getElementById('subtitle').title + "&nbsp;";
      startTyping(strs);
    </script>
  


  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "/local-search.xml";
      var inputArea = document.querySelector("#local-search-input");
      inputArea.onclick = function () {
        searchFunc(path, 'local-search-input', 'local-search-result');
        this.onclick = null
      }
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



</body>
</html>
